<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>单对象查询分析</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/openlayers/4.2.0/ol.css" rel="stylesheet">
    <style>
        .ol-popup {
            position: absolute;
            top: 10px;
            right: 10px;
        }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="model" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <p>正在创建单对象查询分析...</p>
            </div>
        </div>
    </div>
</div>
<div id="map" style="width: 100%;height:100%"></div>
<div id="popup" class="ol-popup" style='width:350px'>
    <div class="panel panel-default">
        <div class='panel-heading'>
            <h3 class='panel-title'>单对象查询分析</h3>
        </div>
        <div class='panel-body'>
            <div class='input-group'>
                <span class='input-group-addon'>源数据集<span title="必填字段" style="color: red;"> * </span>　</span>
                <input id='datasetName' type='text' class='form-control'
                       value='ProcessingData_processing_newyorkZone_R'/></div>
            <p></p>
            <div class='input-group'>
                <span class='input-group-addon'>查询对象数据集<span title="必填字段" style="color: red;"> * </span></span>
                <input id='datasetQuery' type='text' class='form-control'
                       value='ProcessingData_processing_singleRegion_R'/>
            </div>
            <p></p>
            <div class='input-group'>
                <span class='input-group-addon'>空间查询模式<span title="必填字段" style="color: red;"> * </span></span>
                <select class='form-control' id='mode' name='mode'>
                    <option value='CONTAIN'>包含</option>
                    <option value='CROSS'>交叉</option>
                    <option value='DISJOINT'>分离</option>
                    <option value='IDENTITY'>重合</option>
                    <option value='INTERSECT' selected>相交</option>
                    <option value='OVERLAP'>叠加</option>
                    <option value='TOUCH'>邻接</option>
                    <option value='WITHIN'>被包含</option>
                </select>
            </div>
            <p></p>
            <div align='right'>
                <input type='button' id='btn' class='btn btn-primary' value='创建'/>
            </div>
        </div>
    </div>
</div>
<script src="http://cdn.bootcss.com/openlayers/4.2.0/ol.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../dist/iclient9-openlayers.min.js"></script>
<script type="text/javascript">
    var layer, processingsUrl = "http://117.122.248.69:8090/iserver/services/spatialprocessing/rest/v1/jobs",
            map = new ol.Map({
                target: 'map',
                controls: ol.control.defaults({attributionOptions: {collapsed: false}})
                .extend([new ol.supermap.control.Logo()]),
                view: new ol.View({
                    center: [-73.95, 40.75],
                    zoom: 12,
                    projection: 'EPSG:4326'
                })
            }),
            processingService = new ol.supermap.ProcessingService(processingsUrl);

    map.addLayer(new ol.layer.Tile({
        source: new ol.source.Tianditu({
            url: "http://t0.tianditu.com/vec_c/wmts",
            matrixSet: 'c',
            layer: 'vec',
            projection: "EPSG:4326"
        })
    }));

    initForm();
    bindClick();

    function initForm() {
        var info = new ol.control.Control({element: popup});
        info.setMap(map);
        map.addControl(info);
    }

    function bindClick() {
        $('#btn').on('click', function () {
            $('#btn').prop('disabled', true);
            $("#model").modal({show: true, backdrop: 'static', keyboard: false});
            if (map && layer) {
                map.removeLayer(layer);
            }
            queryJobs();
        });
    }

    function queryJobs() {
        var singleObjectQueryJobsParameter = new SuperMap.SingleObjectQueryJobsParameter({
            datasetName: $('#datasetName').val(),
            datasetQuery: $('#datasetQuery').val(),
            mode: $('#mode option:selected').attr('value')
        });
        processingService.addQueryJob(singleObjectQueryJobsParameter, function (serviceResult) {
            if (serviceResult.error) {
                $('#btn').prop('disabled', false);
                $("#model").modal('hide');
                var errorMsg = serviceResult.error.errorMsg || "code: " + serviceResult.error.code;
                showAlert("创建失败!<br>" + errorMsg, false);
                return;
            }
            serviceResult.result.setting.serviceInfo.targetServiceInfos.map(function (info) {
                if (info.serviceType === 'RESTMAP') {
                    SuperMap.FetchRequest.get(info.serviceAddress + '/maps').then(function (response) {
                        return response.json();
                    }).then(function (result) {
                        var mapUrl = result[0].path;
                        new ol.supermap.MapService(mapUrl).getMapInfo(function (mapInfo) {
                            layer = new ol.layer.Tile({
                                source: new ol.source.ImageSuperMapRest(ol.source.ImageSuperMapRest.optionsFromMapJSON(mapUrl, mapInfo.result))
                            });
                            map.addLayer(layer);
                            $("#model").modal('hide');
                            $('#btn').prop('disabled', false);
                        });
                    });
                }
            });
        });
    }

    function showAlert(msg, state) {
        var className = "alert-";
        className += state ? "success" : "danger";
        if (!$('#msg_container')[0]) {
            var alertDiv = $("<div class='alert alert-dismissible' id='msg_container' role='alert' " +
                    "style='z-index:800;position: absolute;top: 20px;left: 40%;width:400px;display: none'>" +
                    "<button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button>" +
                    "<strong><p id='msg' style='word-wrap: break-word'></p></strong></div>");
            $('body').append(alertDiv)
        }
        $('#msg_container').addClass(className);
        $('#msg_container').slideDown(300);
        $('#msg').html(msg);
    }

</script>
</body>
</html>